<template>
    <a-card title="图文素材列表">
        <a-dropdown slot="extra">
            <a-menu slot="overlay">
                <a-menu-item key="1" @click="modalShow=true">
                    <a-icon type="plus"/>
                    创建图文素材
                </a-menu-item>
                <a-menu-divider/>
                <a-menu-item key="2" @click="syncMaterial">
                    <a-icon type="download"/>
                    同步素材库
                </a-menu-item>
            </a-menu>
            <a-button type="danger" style="margin-left: 8px">新增图文素材
                <a-icon type="down"/>
            </a-button>
        </a-dropdown>
        <a-list :grid="{ gutter:16, column: 4 }"
                :loading="ListLoading"
                :pagination="pagination"
                :data-source="dataSource">
            <a-list-item slot="renderItem" slot-scope="item, index">
                <a-card :hoverable="true">
                    <NewsPreview :description="item.mediaDescription" slot="cover"/>
                    <template slot="actions" class="ant-card-actions">
                        <span @click="()=>{ editMediaId=item.mediaId; modalShow=true;  }"><a-icon type="edit"/>编辑</span>
                        <span @click="deleteMaterial(item.mediaId)"><a-icon type="delete"/>删除</span>
                    </template>
                </a-card>
            </a-list-item>
        </a-list>
        <!--  表单组件-->
        <NewsForm v-if="modalShow"  :mediaId="editMediaId"   @closeModal="handlerCloseModal"/>
    </a-card>
</template>
<script>
    import {materialList, deleteMaterial} from '../../../public/http.js';
    import {pagination} from '../../../public/colums.js';
    import {syncMaterialFile} from "../../../public/http";
    export default {
        components: {
            NewsForm: () => import('./form'),
            NewsPreview: () => import('../../../component/material/NewsPreview')
        },
        data() {
            return {
                editMediaId:null, //正在修改的素材ID
                modalShow: false,
                upLoading: false,
                ListLoading: false,
                dataSource: [],
                pagination: {
                    ...pagination,
                    pageSize: 12,
                    onChange: current => {
                        this.pagination.current = current;
                        this.getMaterialList();
                    }
                },
                loading: false, //表格loading
                searchData: {mediaType: "news"}
            }
        },
        methods: {
            //监听关闭
            handlerCloseModal(e){
                this.editMediaId=null;
                this.modalShow=false;
                if(e.render){ this.getMaterialList();}
            },

            //同步公众平台内的图片素材
            syncMaterial() {
                this.ListLoading = true;
                syncMaterialFile("news").then(res => {
                    this.$exMod.ajaxMessage(res);
                    this.getMaterialList();
                });
                this.ListLoading = false;
            },
            //1.0 获取表格数据
            getMaterialList() {
                this.ListLoading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchData); //删除对象中的空值
                materialList(this.pagination, searchData).then(res => {
                    this.ListLoading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //删除素材
            deleteMaterial(mediaId) {
                const _this = this;
                this.$confirm({
                    width: 350,
                    title: `确定要删除这组图文素材吗?`,
                    onOk() {
                        deleteMaterial(mediaId).then(res => {
                            _this.$exMod.ajaxMessage(res);
                            if (res.code === 0) {
                                _this.getMaterialList();
                            }
                        })
                    },
                });
            },
        },
        created() {
            this.getMaterialList();
        }
    }
</script>
